<template>
  <div class="text-left">
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <label>订单编号：</label> <i>{{orderInfo.orderId}}</i>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <label>运单编号：</label> <i>{{orderInfo.transportOrder?orderInfo.transportOrder.id:''}}</i>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <label>下单时间：</label> <i>{{orderInfo.createTime}}</i>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <label>订单状态：</label> <i>{{status[orderInfo.status]}}</i>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" class="mt-2">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <label>预计到达日期：</label> <i>{{orderInfo.estimatedArrivalTime}}</i>
          </div></el-col
        >
      </el-row>
    </el-card>
    <br/>
    <el-collapse v-model="activeName">
      <el-collapse-item title="基本信息" name="1">
        <template slot="title">
          <label class="title">基本信息</label>
        </template>
        <el-card class="box-card" shadow="never">
          <div>
           <el-divider content-position="left"><b>发货方</b></el-divider>
            <el-row :gutter="20" class="mt-2 ml-2">
              <el-col :span="8">
                <label>发货方姓名：</label> <i>{{orderInfo.senderName}}</i>
              </el-col>
              <el-col :span="8">
                <label>发货方地址：</label> <i>{{orderInfo.senderProvinceId+" "+orderInfo.senderCityId+" "+orderInfo.senderCountyId}}</i>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="ml-2">
              <el-col :span="8">
                <label>发货方电话：</label> <i>{{orderInfo.senderPhone}}</i>
              </el-col>
              <el-col :span="8">
                <label>详细地址：</label> <i>{{orderInfo.senderAddress}}</i>
              </el-col>
            </el-row>
          </div>
          
          <div class="mt-2">
            <el-divider content-position="left"><b>收货方</b></el-divider>
            <el-row :gutter="20" class="mt-2 ml-2">
              <el-col :span="8">
                <label>收货方姓名：</label> <i>{{orderInfo.receiverName}}</i>
              </el-col>
              <el-col :span="8">
                <label>收货方地址：</label> <i>{{orderInfo.receiverProvinceId+" "+orderInfo.receiverCityId+" "+orderInfo.receiverCountyId}}</i>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="ml-2">
              <el-col :span="8">
                <label>收货方电话：</label> <i>{{orderInfo.receiverPhone}}</i>
              </el-col>
              <el-col :span="8">
                <label>详细地址：</label> <i>{{orderInfo.receiverAddress}}</i>
              </el-col>
            </el-row>
          </div>
          <div class="mt-2">
            <b>距离：</b><i>{{orderInfo.distance}} km</i>
            <b class="ml-5">地图：</b>
            <el-link @click="$router.push({name:'orderMap',params:{orderInfo:orderInfo}})" type="primary" :underline="false">查看地图</el-link>
          </div>
        </el-card>
      </el-collapse-item>

      <el-collapse-item class="mt-4" name="2">
        <template slot="title">
          <label class="title">费用信息</label>
        </template>
        <el-card class="box-card" shadow="never">
          <div>
            <el-row :gutter="20" class="mt-2 ml-2">
              <el-col :span="8">
                <label>运费：</label>
                <i style="color: #ffb302; font-size: 20px">{{orderInfo.amount}}</i>&emsp;元
              </el-col>
              <el-col :span="8"> <label>支付方式：</label> <i>{{orderInfo.paymentMethod==1?'预付':'到付'}}</i> </el-col>
              <el-col :span="8"> <label>付款状态：</label> <i>{{orderInfo.paymentStatus==1?'未付':'已付'}}</i> </el-col>
            </el-row>
          </div>
        </el-card>
      </el-collapse-item>

      <el-collapse-item class="mt-4" name="3">
        <template slot="title">
          <label class="title">货品信息</label>
        </template>
        <el-card class="box-card" shadow="never">
          <div>
            <el-table :data="orderInfo.orderCargo" stripe style="width: 100%">
              <el-table-column prop="id" label="序号" width="180">
              </el-table-column>
                 <el-table-column prop="goodTypeName" label="货品类型" width="180">
              </el-table-column>
              <el-table-column prop="totalWeight" label="重量（千克）" width="180">
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-collapse-item>

      <el-collapse-item class="mt-4" name="4">
        <template slot="title">
          <label class="title">取件信息</label>
        </template>
        <el-card class="box-card" shadow="never">
          <div>
            <el-row :gutter="20" class="mt-2 ml-2">
              <el-col :span="6">
                <label>所在网点：</label> <i>{{orderInfo.taskPickup.agency?orderInfo.taskPickup.agency.name:""}}</i>
              </el-col>
              <el-col :span="6">
                <label>取件类型：</label> <i>{{orderInfo.pickupType==1?'网点自寄':'上门取件'}}</i>
              </el-col>
              <el-col :span="6">
                <label>作业状态：</label> <i>{{workStatus[orderInfo.taskPickup.status]}}</i>
              </el-col>
              <el-col :span="6">
                <label>取件快递员：</label> <i>{{orderInfo.taskPickup.courier?orderInfo.taskPickup.courier.name:""}}</i>
              </el-col>
            </el-row>
          </div>
          <div class="mt-2">
            <el-row :gutter="20" class="mt-2 ml-2">
              <el-col :span="6">
                <label>快递员电话：</label> <i>{{orderInfo.taskPickup.courier?orderInfo.taskPickup.courier.mobile:""}}</i>
              </el-col>
              <el-col :span="6">
                <label>预计取件时间：</label> <i>{{orderInfo.taskPickup.estimatedStartTime}}</i>
              </el-col>
              <el-col :span="6">
                <label>取件完成时间：</label> <i>{{orderInfo.taskPickup.actualEndTime}}</i>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <br/>
    <el-button style="margin-left:46%" @click="$router.go(-1)">返回</el-button>
  </div>
</template>

<script>
export default {
  data() {
        return {
          orderInfo:{
            orderCargo:[],
            orderLocation:{},
            transportOrder:{},
            taskPickup:{},
            taskDispatch:{}
          },
          activeName:['1'],
          status:['','待取件','网点自寄','已取件','带发车','运输中','待派送','派送中','已签收','拒签',"已取消"],
        
        // 任务状态，1为待执行（对应 待上门和须交接）、2为进行中（该状态暂不使用，属于保留状态）、3为待确认（对应 待妥投和须交件）、4为已完成、5为已取消
          workStatus:['','待执行','进行中','待确认','已完成','已取消']
        }
      },
      created(){
        this.orderInfo=this.$route.params.order
        this.orderInfo.orderCargo=[this.orderInfo.orderCargo]
        console.log(this.orderInfo)
      }
};
</script>

<style>
.el-collapse-item__header{
  background-color: #f8faff;
}
h5{
  margin-left: 20px;
}
.title{
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: #2a2929;
  margin-left: 22px;
}

label{
  color: black;
  font-size:15px ;
}
i{
color: #636262;
font-size: 15px;
}
</style>